import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Modal,
  Table,
  Button,
  Descriptions,
} from 'antd';

import '@ant-design/compatible/assets/index.css';
import SaveExpress from './components/SaveExpress';

interface ExpressProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  loading: boolean;
  detailInfo: any;
  dataInfo: any;
  location: { query: any };
  allExpressList: any;
  myExpressListID: any;
}

interface ExpressState {
  searchValues: any;
  saveVisible: boolean;
  deleteId: number;
  deleteVisible: boolean;
  rowId:number;
}

function mapStateToProps(state: any) {
  const {
    VIPUserManagementExpress: {
      detailInfo,
      dataInfo,
      loading,
      allExpressList,
      myExpressListID,
    },
  } = state;
  return {
    detailInfo,
    dataInfo,
    loading,
    allExpressList,
    myExpressListID,
  };
}

@connect(mapStateToProps)
class expressElem extends Component<ExpressProps, ExpressState> {
  columns = [
    { title: 'ID', dataIndex: 'expressId' },
    { title: '公司名称', dataIndex: 'expressName' },
    { title: '固定电话', dataIndex: 'phone' },
    { title: '创建时间', dataIndex: 'createTime' },
    {
      title: '操作',
      render: (text: any, record: any) => (
        <div>
          <span className="operLink" onClick={this.handleDelete.bind(this, record)}>
            删除
          </span>
        </div>
      ),
    },
  ];

  state: ExpressState = {
    searchValues: {
      pageIndex: 1,
      pageSize: 20,
    },
    saveVisible: false,
    deleteId: 0,
    deleteVisible: false,
    rowId: 0,
  };

  componentDidMount() {
    const {
      location: { query: { id } },
    } = this.props;
    if (id) this.fetchDataInfo(id);
  }

  componentDidUpdate(props: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (id && id !== props.location.query.id) {
      this.fetchDataInfo(id);
    }
  }

  fetchDataInfo = (id: number) => {
    const { searchValues } = this.state;
    const new_searchValues = {
      ...searchValues,
      vipId: id,
    };

    this.setState({ searchValues: new_searchValues }, () => {
      this.fetchAction('fetch', { id, loadUser: 1 });
      this.fetchAction('fetchExpressList', new_searchValues);
      this.fetchAction('fetchMyExpressListID', { vipId: id });
    });
  };

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const new_searchValues = { ...searchValues, pageIndex, pageSize };
    this.setState({ searchValues: { ...new_searchValues } }, () => {
      this.fetchAction('fetchExpressList', new_searchValues);
    });
  };

  handleSave = (saveVisible: boolean) => {
    this.setState({ saveVisible });

    const params = {
      pageIndex: 1,
      pageSize: 20,
    };
    this.fetchAction('saveAllExpressList', params);
  };

  handleDelete = ({ id }: any) => {
    this.setState({
      deleteId: id,
      deleteVisible: true,
    });
  };

  handleConfirm = () => {
    const { deleteId: id, searchValues } = this.state;
    const { detailInfo: { id: vipId } } = this.props;

    const params = {
      searchValues,
      payload: { vipId, id },
    };
    this.fetchAction('deleteExpress', params);
    this.handleCancel();
  };

  handleCancel = () => {
    this.setState({
      deleteId: 0,
      deleteVisible: false,
    });
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    dispatch({
      type: `VIPUserManagementExpress/${typeName}`,
      payload,
    });
  };

  render() {
    const { searchValues, saveVisible, deleteVisible } = this.state;

    const {
      detailInfo,
      dataInfo,
      loading,
      allExpressList,
      location: { query },
      myExpressListID,
    }: any = this.props;

    const dataSource = dataInfo.list;
    const pagination: object = dataInfo
      ? {
        total: dataInfo.count,
        current: searchValues.pageIndex,
        pageSize: searchValues.pageSize,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: () => `共${dataInfo.count || 0}条数据`,
        onChange: this.onSelectChange,
        onShowSizeChange: this.onSelectChange,
      }
      : {};

    return (
      <Fragment>
        <PageHeader />

        <Card bordered={false} className="searchForm">
          <Descriptions>
            <Descriptions.Item label="商户名称">{detailInfo.name}</Descriptions.Item>
            <Descriptions.Item label="VIP编号">{detailInfo.vipCode}</Descriptions.Item>
          </Descriptions>
        </Card>

        <Card bordered={false} className="tableList">
          <div className="tableBtns">
            <Button
              className="smallButton"
              type="primary"
              size="small"
              onClick={this.handleSave.bind(this, true)}
            >
              添加
            </Button>
          </div>
          <Table
            className="statementTable tableHeight60"
            rowKey="id"
            loading={loading}
            columns={this.columns}
            dataSource={dataSource}
            pagination={pagination}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />
          <Modal
            title="操作提示"
            visible={deleteVisible}
            onOk={this.handleConfirm}
            onCancel={this.handleCancel}
          >
            <p style={{ textAlign: 'center' }}>确定要删除当前快递公司吗？</p>
          </Modal>
          <SaveExpress
            saveVisible={saveVisible}
            allExpressList={allExpressList}
            myExpressList={myExpressListID}
            id={query.id}
            handleCancel={this.handleSave.bind(this)}
            fetchAction={this.fetchAction.bind(this)}
          />
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<ExpressProps>()(expressElem);
